<template>
	<view>
		<!-- 假设我需要状态栏到文字内容部分还有20px的距离 -->
		<!-- , 'top': keyheight + 'px'-->
		<view class="myNavigation bgc" :style="{'height':height+90+'px'}">
			<view class="left-block" @click="toBack">
				<label class="iconfont icon115fangxiang_xiangzuo"></label>
				<label class="message-number">55</label>
			</view>
			<view class="center-block" :style="{left: screenWidth/2 - 50 + 'px'}">
				<text class="name omit" style="font-size: 16px;"><label class="iconfont iconerduo"></label>{{nickName}}</text>
				<text v-if="receiverStatus == 0" class="status">离线</text>
				<text v-if="receiverStatus == 1" class="status">手机在线</text>
				<text v-if="receiverStatus == 2" class="status">隐身</text>
			</view>
			<view class="right-block">
				<label class="iconfont iconweibiaoti-"></label>
				<label class="iconfont iconcaidan"></label>
			</view>
		</view>
	</view>
</template>

<script>
	
	
	export default {
		name: 'Navigation',
		data() {
			return {
				height:null,//获取的状态栏高度
				screenWidth: uni.getSystemInfoSync().screenWidth, // 手机屏幕宽度
			}
		},
		props:{
			nickName: String,
			keyheight: Number,
			receiverStatus: Number
		},
		beforeCreate(){
			var _this=this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success:function(data){
					// 将其赋值给this
					_this.height=data.statusBarHeight;
				}
			})
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta:1,
					animationType: 'pop-out',
					animationDuration: 200
				})
			}
		},
		components: {
		}
	}
</script>

<style>
	/* .status_bar {
		background-color: #007AFF;
	} */
	.myNavigation {
		/* background-color: #10d4ff; */
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		top: 0;
		/* bottom: 20rpx; */
		left: 0;
		width: 100%;
		/* padding: 0 30rpx; */
		/* margin: 0 ; */
		z-index: 1;
		color: #FFFFFF;
	}
	
	.left-block {
		position: absolute;
		left: 20rpx;
		bottom: 15rpx;
	}
	
	.center-block {
		position: absolute;
		/* left: 280rpx; */
		bottom: 10rpx;
		width: 100px;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	
	.name {
		font-size: 18px;
	}
	
	.status {
		font-size: 11px;
	}
	
	.right-block {
		position: absolute;
		left: 600rpx;
		bottom: 10rpx;
		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 120rpx;
	}
	
	.icon115fangxiang_xiangzuo {
		font-size: 24px;
	}
	
	.iconweibiaoti- {
		font-size: 24px;
	}
	
	.iconerduo {
		font-size: 16px;
	}
	
	.iconcaidan {
		font-size: 24px;
	}
	
	.message-number {
		height: 42rpx;
		/* width: 40rpx; */
		font-size: 14px;
		text-align: center;
		line-height: 42rpx;
		padding: 0 14rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 30rpx;
	}
</style>
